<template>
	<div id="login">
		<p class="title">登录页面</p>
		<div class="flex">
			Vuex：
			<button @click="changeNum(count - 1)">-</button>
			<div class="flex">{{ count }}</div>
			<button @click="changeNum(count + 1)">+</button>
		</div>
		<button class="btn" @click="toBack">go back</button>
	</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {}
	},
	methods: {
		toBack() {
			this.$router.back()
		},
		...mapMutations({
			changeNum: 'changeCount',
		}),
	},
	computed: {
		...mapState({
			count: (state) => state.count,
		}),
	},
}
</script>
<style lang="less">
#login {
	padding-top: 50px;
	.title {
		text-align: center;
		font-size: 20px;
	}
	.btn {
		padding: 10px 15px;
		color: #000;
		display: block;
		outline: none;
		border: none;
		margin: 50px auto;
		background: rgb(106, 255, 243);
		&:active {
			opacity: 0.6;
		}
	}
}
</style>
